<template>
  <BasePage title="学院角色确认" description="确认您的学院管理员身份">
    <!-- 学院信息卡片 -->
    <StatusCard 
      status="success" 
      title="身份已确认" 
      description="您已成功确认学院管理员身份"
    >
      <div class="mt-4 space-y-3 text-sm">
        <div class="flex justify-between">
          <span class="text-gray-500">姓名</span>
          <span class="font-medium">{{ collegeInfo.name }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-500">工号</span>
          <span class="font-medium">{{ collegeInfo.staffId }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-500">学院</span>
          <span class="font-medium">{{ collegeInfo.college }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-500">职务</span>
          <span class="font-medium">{{ collegeInfo.position }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-500">联系电话</span>
          <span class="font-medium">{{ collegeInfo.phone }}</span>
        </div>
      </div>
      
      <div class="mt-6">
        <button 
          @click="showEditForm = true" 
          class="w-full py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors"
        >
          修改信息
        </button>
      </div>
    </StatusCard>
    
    <!-- 辅导员统计 -->
    <div class="mt-6 bg-white rounded-lg shadow-sm p-4">
      <h3 class="text-lg font-medium text-gray-800 mb-4">辅导员统计</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-blue-50 p-3 rounded-lg">
          <div class="text-blue-500 font-medium">{{ counselorStats.total }}</div>
          <div class="text-sm text-gray-500 mt-1">辅导员总数</div>
        </div>
        <div class="bg-green-50 p-3 rounded-lg">
          <div class="text-green-500 font-medium">{{ counselorStats.confirmed }}</div>
          <div class="text-sm text-gray-500 mt-1">已确认身份</div>
        </div>
        <div class="bg-yellow-50 p-3 rounded-lg">
          <div class="text-yellow-500 font-medium">{{ counselorStats.reported }}</div>
          <div class="text-sm text-gray-500 mt-1">今日已上报</div>
        </div>
        <div class="bg-red-50 p-3 rounded-lg">
          <div class="text-red-500 font-medium">{{ counselorStats.unreported }}</div>
          <div class="text-sm text-gray-500 mt-1">今日未上报</div>
        </div>
      </div>
    </div>
    
    <!-- 编辑表单弹窗 -->
    <div v-if="showEditForm" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg max-w-md w-full p-5">
        <h3 class="text-lg font-medium text-gray-800 mb-4">修改信息</h3>
        
        <BaseForm @submit="updateInfo">
          <div class="form-group">
            <label class="form-label">姓名</label>
            <input 
              v-model="editForm.name" 
              type="text" 
              class="form-input" 
              placeholder="请输入姓名"
              required
            >
          </div>
          
          <div class="form-group">
            <label class="form-label">工号</label>
            <input 
              v-model="editForm.staffId" 
              type="text" 
              class="form-input" 
              placeholder="请输入工号"
              required
              disabled
            >
          </div>
          
          <div class="form-group">
            <label class="form-label">学院</label>
            <input 
              v-model="editForm.college" 
              type="text" 
              class="form-input" 
              placeholder="请输入学院"
              required
              disabled
            >
          </div>
          
          <div class="form-group">
            <label class="form-label">职务</label>
            <input 
              v-model="editForm.position" 
              type="text" 
              class="form-input" 
              placeholder="请输入职务"
              required
            >
          </div>
          
          <div class="form-group">
            <label class="form-label">联系电话</label>
            <input 
              v-model="editForm.phone" 
              type="tel" 
              class="form-input" 
              placeholder="请输入联系电话"
              required
            >
          </div>
        </BaseForm>
        
        <div class="flex space-x-3 mt-4">
          <button 
            @click="cancelEdit" 
            class="flex-1 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors"
          >
            取消
          </button>
          <button 
            @click="updateInfo" 
            class="flex-1 py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors"
          >
            保存
          </button>
        </div>
      </div>
    </div>
  </BasePage>
</template>

<script setup>
import { ref } from 'vue';
import BasePage from '../../components/BasePage.vue';
import BaseForm from '../../components/BaseForm.vue';
import StatusCard from '../../components/StatusCard.vue';

// 学院管理员信息
const collegeInfo = ref({
  name: '张主任',
  staffId: '20010001',
  college: '计算机科学与技术学院',
  position: '教学副院长',
  phone: '13800138000'
});

// 辅导员统计数据
const counselorStats = ref({
  total: 12,
  confirmed: 10,
  reported: 8,
  unreported: 2
});

// 编辑表单
const showEditForm = ref(false);
const editForm = ref({ ...collegeInfo.value });

// 取消编辑
const cancelEdit = () => {
  showEditForm.value = false;
  editForm.value = { ...collegeInfo.value };
};

// 更新信息
const updateInfo = async () => {
  // 模拟API请求
  await new Promise(resolve => setTimeout(resolve, 800));
  
  // 更新信息
  collegeInfo.value = { ...editForm.value };
  
  // 关闭弹窗
  showEditForm.value = false;
  
  // 在实际应用中，这里会发送请求到后端保存信息
  console.log('学院管理员信息已更新:', collegeInfo.value);
};
</script>